<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>userPage</title>
    <link rel="stylesheet" th:href="@{/css/qingzhu0.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu6.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/userPage.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div th:replace="common::header"></div>

<div id="usercenter">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">我的信息</li>
            <li>我的订单</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="userinfo">
                    <ul th:object="${session.user}">
                        <li><span class="itemname">用户姓名：</span><span class="username" th:text="*{name}">您的默认名称</span></li>
                        <hr>
                        <li><span class="itemname">联系电话：</span><span class="phone" th:text="*{telephone}">您的默认联系电话</span></li>
                        <hr>
                        <li><span class="itemname">收货地址：</span><span class="address" th:text="*{address1}">您的默认收货地址</span></li>
                        <hr>
                        <li><span class="itemname">电子邮箱：</span><span class="address" th:text="*{email}">您的邮箱</span></li>
                        <hr>
                    </ul>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">所有订单</li>
                        <li>待发货</li>
                        <li>已签收</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table id="demo" class="layui-table" lay-filter="test">
                                <colgroup>
                                    <col width="100">
                                    <col width="100">
                                    <col width="330">
                                    <col width="80">
                                    <col width="50">
                                    <col width="80">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>日期</th>
                                    <th>商品</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>实付款</th>
                                    <th>收货地址</th>
                                    <th>订单状态</th>
                                </tr>
                                </thead>
                                <tbody class="orderBody">
                                </tbody>
                            </table>
                        </div>
<!--                        <div class="layui-tab-item">待发货</div>-->
<!--                        <div class="layui-tab-item">已签收</div>-->
                    </div>
                </div>
            </div>
<!--            <div class="layui-tab-item">-->
<!--                <form class="layui-form" action="/userinfo" method="post">-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">电子邮箱</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="text" name="email" required  lay-verify="required|email" placeholder="请输入电子邮箱" autocomplete="off" class="layui-input">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">联系电话</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">收货地址</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="text" name="address" lay-verify="required" placeholder="请输入收货地址" autocomplete="off" class="layui-input">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-form-item">-->
<!--                        <div class="layui-input-block">-->
<!--                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>-->
<!--                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </form>-->
<!--            </div>-->
        </div>
    </div>
</div>

<div th:replace="common::footer"></div>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/jqurey.js}"></script>
<script>
    layui.use(['form','element','table'], function(){
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        // 表格渲染

    });
    $(function () {
        getOrder()
        var data=[
            {
                id:'32546',
                gmtCreate:'2019.12.1',
                product:[
                    {img:'image/img02.png',name:'小簸箕',price:40,number:2},
                    {img:'image/img04.png',name:'渣渣方块',price:50,number:1}
                ],
                address:'浙江理工大学生活三区',
                total:130,
                state:'待发货'
            },
            {
                id:'32546',
                gmtCreate:'2019.12.8',
                product:[
                    {img:'image/img01.png',name:'小簸箕',price:40,number:2},
                    {img:'image/img03.png',name:'渣渣方块',price:50,number:1}
                ],
                address:'浙江理工大学生活三区',
                total:130,
                state:'已发货'
            },
            {
                id:'32546',
                gmtCreate:'2019.12.3',
                product:[
                    {img:'image/img02.png',name:'小簸箕',price:40,number:2},
                    {img:'image/img04.png',name:'黑桃蜡烛',price:50,number:1}
                ],
                address:'浙江理工大学生活三区',
                total:130,
                state:'待发货'
            }
        ]
        putData(data)
    })
    function getOrder(){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/mall/order/list.do",
            //请求成功
            success : function(result) {
                // 装载订单数据
                putData(result.data)
            }
        });
    }
    function putData(data){
        var orderBody=$(".orderBody")
        for(item of data){
            var tr=$("<tr></tr>")
            var id=$("<td id='productid'>"+item.id+"</td>")
            var time=$("<td>"+item.gmtCreate.slice(0,10)+"</td>")
            var products=$("<td colspan='3' style='padding: 0px;'></td>")
            var table=$("<table class='layui-table' style='margin:0px;'></table>")
            var colgroup=$("<colgroup><col width='330'><col width='80'><col width='50'></colgroup>")
            tr.append(id)
            tr.append(time)
            tr.append(products)
            table.append(colgroup)
            for(i of item.userOrders){
                var productRow=$("<tr><td><img src='/mall/image/"+i.product.mainImage+"' alt='商品略缩图' width='75px' height='75px'> "+i.product.name+"</td><td>￥"+i.product.price+"</td><td>"+i.number+"</td></tr>")
                table.append(productRow)
            }
            products.append(table)
            tr.append(products)
            var total=$("<td>￥"+item.total+"</td>")
            var addr=$("<td>"+item.addr+"</td>")
            if(item.status=='1'){
                var state=$("<td><span onclick='pay("+item.id+")'>待支付</span></td>")
            }else if(item.status=="2"){
                var state=$("<td><span onclick='receive("+item.id+")'>待发货</span></td>")
            }else if(item.status=="4"){
                var state=$("<td>已完成</td>")
            }
            tr.append(total)
            tr.append(addr)
            tr.append(state)
            orderBody.append(tr)
        }

    }
    function pay(id){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/mall/order/pay.do?orderId="+id,
            //请求成功
            success : function(result) {
                alert("支付成功")
                location.reload();
            }
        });
    }
    function receive(id){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/mall/order/receive.do?orderId="+id,
            //请求成功
            success : function(result) {
                alert("支付成功")
                location.reload();
            }
        });
    }
</script>
</html>